<template>
	<view class="attention">
		<view class="box">
			
		</view>
		<view class="No_attention" v-if="guanzhu">
			<view class="No_attention_top">
				<view class="No_attention_top_bottom" >
					<h3>还没有关注的人呢</h3>
					<text>关注后，可以在这里查看对方的最新动态</text>
				</view>
			</view>
			<NoAttention></NoAttention>
		</view>
		<view class="find">
			<view class="attention-content" v-for="(item, index) in notes" :key="item.postId">
				<view class="attention-content-img" @click="as(index)">
					<image :src="item.url" mode="aspectFit" v-if="item.mediaType=='image'" @click="as(index)" ></image>
					<video :src="item.url" :controls="false" :show-center-play-btn="false" object-fit="contain"
						v-else @click="as(index)"></video>
				</view>
				<text class="attention-content-text" @click="as(index)">{{ item.content }}</text>
				<view class="attention-content-user">
					<view class="attention-content-user-img">
						<image :src="item.profilePrcture" mode="aspectFit" class="attention-content-user-img-image">
						</image>
						<text class="attention-content-user-text">{{ item.username }}</text>
					</view>
					<view class="attention-content-user-line" @click="discolor(index)" ref="redT">
			
						<image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit"
							class="attention-content-user-img-image" v-if="item.like"></image>
						<image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit"
							class="attention-content-user-img-image" v-else></image>
						<text>{{ item.likeNum }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import NoAttention from '@/pages/index/components/NoAttention.vue';
	export default {
		name: "attention",
		components: {
			NoAttention
		},
		data() {
			return {
				res: '../../static/img/sexAndAge/boy.jpg',
				attentionList: [{
						img: '../../../static/img/portrait.jpg'
					},
				],
					status: "loading",
					show: true,
					notes: [],
					page: 1,
					size: 6,
					guanzhu:true,
					lastScrollTop: 0, // 用于保存上次滚动的位置
			};
		},
		created() {
				this.seleteIndex();
			},
			props: ["findCon", "ffive"],
			watch: {
				findCon: {
					handler(newVal, oldVal) {
						// 当 findCon 发生变化时执行 seleteIndex 方法
						this.page = newVal
						this.seleteIndex();
					},
				},
				ffive: {
					handler(newVal, oldVal) {
						console.log(newVal);
						this.notes = [];
						this.page = 1;
						this.status="loading";
						this.seleteIndex();
					}
				}
			},
			methods: {
				setActiveTab(tab) {
					this.activeTab = tab;
					this.diaoyu(tab)
				},
				discolor(e) {
					console.log(this.notes[e].like);
					this.notes[e].like = !this.notes[e].like;
					// this.nates[e].NoSelected = !this.nates[e].NoSelected;
					if (this.notes[e].like == true) {
						this.request(`/like/goLike?postId=${this.notes[e].postId}&userId=${uni.getStorageSync("id")}`, "post")
							.then((res) => {
								console.log(res);
								this.notes[e].likeNum++;
							}).catch((err) => {
								console.log(err);
							});
					} else if (this.notes[e].like == false) {
						this.request(`/like/delLike?postId=${this.notes[e].postId}&userId=${uni.getStorageSync("id")}`,
								"delete")
							.then((res) => {
								console.log(res);
								this.notes[e].likeNum--;
							}).catch((err) => {
								console.log(err);
							})
					}
		
				},
				as(e) {
					uni.navigateTo({
						url: `/pages/index/viewAsText/viewAsText?postId=${this.notes[e].postId}&mediaType=${this.notes[e].mediaType}&followeeId=${this.notes[e].userId}`
					})
				},
				onPageScroll(e) {
					console.log(e);
					const currentScrollTop = e.scrollTop;
					if (currentScrollTop < this.lastScrollTop) {
						this.show = false;
					}
					this.lastScrollTop = currentScrollTop;
				},
				seleteIndex() {
					if (this.status == "nomore") {
						return;
					}
					this.status = "loading"; // 设置为加载中状态
					this.request(`/getPostsBy/getPostsByFollow?page=${this.page}&size=${this.size}&userId=${uni.getStorageSync('id')}`, "get")
						.then(
							(res) => {
								console.log(res);
								if (res.data.code == 500) {
									this.status = "nomore";
									this.$emit("noAdd", this.status);
								} else {
									this.notes.push(...res.data.result.list);
									if (res.data.result.list.length < this.size) {
										this.status = "nomore";
									} else {
										this.page++;
										this.status = "more"; // 数据加载成功，设置为"more"状态
									}
									console.log(this.notes);
									this.guanzhu = false;
		
								}
							}).catch((err) => {
								console.log(err);
								this.status = "more"; // 请求失败，也设置为"more"状态以避免卡死
							})
				}
			}
		}
</script>

<style>
	.box{
		height: 80rpx;
	}
	.No_attention_top {
		width: 751rpx;
		height: 260rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding: 30rpx;
	}

	.No_attention_top_left {
		width: 20%;
		height: 70%;
		border-radius: 50%;
		padding-left: 20rpx;
	}

	.No_attention_top_left text {
		font-size: 30rpx;
	}

	.No_attention_top_bottom {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.No_attention_bottom {
		display: flex;
		height: 750rpx;
		justify-content: center;
	}
	.find {
		width: 750rpx;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}
	.attention-content {
		margin-top: 10rpx;
		width: 370rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 16rpx;
	}
	
	.attention-content-img {
		width: 100%;
		height: 470rpx;
		display: flex;
		align-items: center;
	
	}
	
	.attention-content-img image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	
	.attention-content-text {
		font-size: 32rpx;
		display: block;
		padding: 15rpx;
	}
	
	.attention-content-user {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.attention-content-user-img {
		display: flex;
		justify-content: space-evenly;
	}
	
	.attention-content-user-img-image {
		width: 45rpx;
		height: 45rpx;
		object-fit: cover;
		object-position: center;
	}
	
	.attention-content-user-line {
		display: flex;
		align-items: center;
	}
</style>
